<template>
  <div id="schoolRecruit">
    <div class="banner">
      <el-image style="width: 100%; height:210px; position: relative;top:-4px;" :src="bannerUrl" fit="fit"></el-image>
    </div>
    <el-row id="hot_job" style="min-height:65px;margin-top:30px">
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <SchoolRecruitSearch></SchoolRecruitSearch>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-main style="padding:2px 0 0;">
      <el-row>
        <el-col :span="3"><div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="18">
          <SRMenu></SRMenu>
        </el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </el-main>
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="18">
        <HotJob></HotJob>
        <HotCompany></HotCompany>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import school_recruit from '@/assets/img/school_recruit.png'
import SchoolRecruitSearch from "@/components/common/SchoolRecruitSearch";
import HotJob from "@/components/content/HotJob";
import HotCompany from "@/components/content/HotCompany";
import SRMenu from "@/components/content/SRMenu";
export default {
  name: "SchoolRecruit",
  components: {
    SchoolRecruitSearch,
    HotJob,
    HotCompany,
    SRMenu
  },
  data() {
    return {
      bannerUrl: school_recruit,
    }
  }
}
</script>

<style scoped>
.banner {
  height: 210px;
}

.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

#hot_job .grid-content {
  color: #428af5;
  font-size: 13px;
}

</style>